<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .header{
        margin: 0 auto;
        width: 800px;
    }
    .nav-banner{
        position: relative;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    a{
        height: 59px;
        line-height: 59px;
        text-decoration: none;
        font-family: 黑体;
        font-size:18px;
        color: #1A1A1A;
    }
    .box{
        position: absolute;
        top: 59px;
    }
    .box-right{
        position: absolute;
        top: 75px;
        left:440px;
    }
    .box-aa{
        position: absolute;
        top: 57px;
        left:500px;
    }
    ul li {
        list-style: none;
    }
    .box-bb{
        position: absolute;
        top:150px;
        left:450px;
    }
    .box-aa-mm{
        position: absolute;
        top:400px;
    }
    .box-aa-bb a{
        margin-left: 80px;
        color: #85bae4;
    }
</style>
<body>
    <a href="index01.html">test1</a>
<a href="index02.html">test2</a>
<div>
    <div class="header nav-banner">
        <div class="fl"><img src="img/163logo.gif" alt=""></div>
        <div class="fr">
            <a href="#">免费邮</a>
            <a href="#">企业邮</a>
            <a href="#">VIP邮箱</a>
            <a href="#">帮助</a>
        </div>
    </div>
</div>
<div >
    <div class="header nav-banner ">
        <div class="fl box">
            <img src="img/imap.jpg" alt="">
            <ul>
                <li>163/126/yeah三大免费邮箱均默认开放</li>
                <li>全面支持iPhone/iPad及Android等系统</li>
                <li>客户端、手机与网页，实现发送、阅读邮件</li>
            </ul>
        </div>
        <div class="fr box-right">
            <img src="img/loginIcon.gif" alt="">
        </div>
        <div class="fr box-aa">
            <a href="">普通登录</a>
        </div>
        <div class="fr box-bb">
            用户名&nbsp;<input type="text" >@163.com <br>
            <br>
            密&nbsp;&nbsp;&nbsp;码&nbsp;<input type="password" ><br>
            <br>
            版&nbsp;&nbsp;&nbsp;本&nbsp;<select name="" id="">
                <option value="">默认</option>
            </select>
            <br> <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">自动登录
            <input type="checkbox" checked>SSL
            <br>
            <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value='登录'>
        </div>
        <div class="fl box-aa-mm">
            <img src="img/netease_logo.gif" alt="">
            <div class="fr box-aa-bb">
                <a href="">关于网易免费邮官方博客客户服务隐私政策|网易公司版权所有&copy;2015-2018</a>
            </div>

        </div>
    </div>
</div>

</body>
</html>